<template>
  <div>

    <Row style="display: flex;align-items: center">
      <i-col class="operation_item y_query_right" :xs="{span: 24}" :sm="{span: 10}">
        <Input placeholder="国家名称" v-model.trim="param.countryName" clearable class="y_condition"></Input>
        <Select v-model="param.method" placeholder="配送方式" clearable class="y_condition">
          <Option v-for="item in postageMethodDict" :value="item.value" :key="item.value">{{ item.name }}</Option>
        </Select>
      </i-col>
      <i-col :xs="{span: 24}" :sm="{span:3}" class="y_query_right">
        <Button type="primary" icon="md-search" class="tiy_btn y_condition" @click="webList">
          查询
        </Button>
      </i-col>
      <i-col :xs="{span: 24}" :sm="{span: 4}" class="y_query_right">
        <Button type="primary" icon="md-reorder" class="tiy_btn y_condition" @click="sortCountry">
          按国家排序
        </Button>
      </i-col>
      <i-col span="24" :xs="{span: 24}" :sm="{span: 5}" class="y_query_right">
        <Button type="warning" icon="md-search"  @click="queryEmptyCountry" style="margin: 0.5rem 1rem 0 0;">
          查询未配置运费的国家
        </Button>
      </i-col>
    </Row>

    <Row v-if="isSearchVisible" style="margin-top: 1rem"  >
      <Alert type="warning"  >当前搜索的内容为:未配置运费的国家</Alert>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border class="base_table"
           :columns="tableTitles" :data="countryPostageList"
           no-data-text="暂无数据" stripe></Table>-->
    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
      <template v-if="countryPostageList.length == 0">
        <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
      </template>
      <list-item class="list_item" v-for="(item,index) in countryPostageList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between">
            <i-col flex="auto" style="text-align: left" >

              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="国家名称" >{{item.countryCn}}</KeyValueView>
              <KeyValueView title="国家英文名称" >{{item.countryEn}}</KeyValueView>
              <KeyValueView v-if="$authority('OTHER-3-202')" title="运费名称" ><a @click="showPostageDetail(index)">{{ item.postageName}}</a></KeyValueView>
              <KeyValueView v-else title="运费名称" >{{ item.postageName}}</KeyValueView>
              <KeyValueView title="运费名称" >{{ item.postageName}}</KeyValueView>
              <KeyValueView title="英文名称" >{{ item.enName}}</KeyValueView>
              <KeyValueView title="最短周期" >{{ item.minTime}}</KeyValueView>
              <KeyValueView title="最长周期" >{{ item.maxTime}}</KeyValueView>
            </i-col>
            <i-col>
              <Button v-if="$authority('OTHER-3-202')" ghost size="small" icon="md-albums" type="primary" @click="showPostageDetail(index)" style="margin-right: 0.5rem">查看</Button>
              <Button v-if="$authority('OTHER-3-201')" ghost size="small" icon="md-trash" type="error"  @click="delete2(index)" >删除</Button>
            </i-col>
          </Row>
        </div>
      </list-item>
    </List>
    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
            show-sizer show-elevator />
    </div>
    <Modal
      v-model="status.actionModal.isShow"
      :title="status.actionModal.title"
      :loading="status.actionModal.isLoading"
      @on-ok="status.actionModal.action">
      <br>
      <p>确定删除该国家运费配置吗?</p>
      <br>
    </Modal>
    <!-- 查看运费详请-->
    <Modal
      v-model="status.showPostageDetailModal.isShow"
      :title="status.showPostageDetailModal.title"
      :styles="{width:'70%',height:'10rem'}">
      <div>
        <div class="modal_base_div" style="text-align: left ">
          <div class="modal_base_div_title" style="margin-bottom: 10px"><strong>基本信息 :</strong></div>
          <Row>
            <i-col span="12">
              <span class="tiy_key">运费名称 :</span><span> {{selectPostage.name}}</span>
            </i-col>
            <i-col span="12">
              <span class="tiy_key">配送方式 :</span><span> {{selectPostage.method}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="12">
              <span class="tiy_key">最短周期 :</span><span> {{selectPostage.minTime}}天</span>
            </i-col>
            <i-col span="12">
              <span class="tiy_key">最长周期 :</span><span> {{selectPostage.maxTime}}天</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="24">
              <span class="tiy_key">最小包裹重量（g）:</span><span> {{selectPostage.minWeight}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="24">
              <span class="tiy_key">运费描述 :</span><span> {{selectPostage.note}}</span>
            </i-col>
          </Row>
          <Row>
            <i-col span="24">
              <span class="tiy_key">内部注意事项 :</span><span> {{selectPostage.innerNote}}</span>
            </i-col>
          </Row>
        </div>
        <div class="modal_base_div" style="text-align: center ">
          <div class="modal_base_div_title" style="margin-bottom: 10px"><strong>运费配置 :</strong></div>
          <Row v-for="(item,index) in selectPostage.postageRules" style="margin-top: 1.5em">

            <i-col span="1" >
              第{{index+1}}档
            </i-col>

            <i-col span="4">
              <span class="tiy_key">首重 :</span><span>{{item.firstWeight}}g</span>
            </i-col>
            <i-col span="4">
               <span class="tiy_key">首重运费 :</span><span> ${{item.firstFee}}</span>
            </i-col>
            <i-col span="5">
               <span class="tiy_key">最大重量 :</span><span> {{item.maxWeight}}g</span>
            </i-col>
            <i-col span="5">
              <span class="tiy_key"> 阶梯重量 : </span><span>{{item.tieredWeight}}g</span>
            </i-col>
            <i-col span="4">
              <span class="tiy_key"> 阶梯价格 :</span><span> ${{item.tieredFee}}</span>
            </i-col>
          </Row>
        </div>
      </div>
    </Modal>

    <!--国家排序排序-->
    <Modal
      :transfer=false
      v-model="isSortShow"
      title="国家排序"
      :styles="{top: '20px',bottom:'20px',width:'70%'}"
      @on-ok="doneSort">
      <Table stripe border class="base_table" :draggable="true" @on-drag-drop="countryDragging"
             :columns="sortTitles" :data="countryPostageSortList" no-data-text="暂无数据">
      </Table>
    </Modal>
  </div>
</template>


<!--javascript 代码-->
<script>
  import tiyData from "./js/countryPostage/country_postage_data";
  import {webList,init,actionDelete,showPostageDetail,countrySort} from "./js/countryPostage/country_postage_fun";
  import KeyValueView from "../widgets/KeyValueView";

  export default {
    data() {
      return {
        page: tiyData.tPage,
        countryPostageList:tiyData.tData.countryPostageList,
        countryPostageSortList:tiyData.tData.countryPostageSortList,
        selectPostage:tiyData.tData.postage,
        yunPath: this.$store.getters.imgPrefix,
        status: tiyData.tStatus,
        param: tiyData.tParam,
        tableTitles:tiyData.listTableTitles(this),
        sortTitles:tiyData.sortTitles(this),
        postageMethodDict:this.$store.getters.dictionaries.postageMethodDict,
        isSearchVisible:false,
        isSortShow:false,
      }
    },
    components:{KeyValueView},
    computed: {

    },
    methods: {
      sortCountry(){
        this.countryPostageSortList.splice(0,this.countryPostageSortList.length);
        if(tiyData.tParam.countryName.trim()==''){
          this.$Message.error("排序之前，请输入国家名称！");
          return;
        }else{
          webList(this,tiyData,2)
          this.isSortShow = true;
        }
      },
      countryDragging(index1,index2){
        let preObj = this.countryPostageSortList[index1];
        this.countryPostageSortList.splice(index1,1);
        this.countryPostageSortList.splice(index2,0,preObj);
        this.countryPostageSortList.forEach(function(item,index){
          item.sequence1 = index;
        })
      },
      doneSort(){
        countrySort(this,tiyData)
      },

      queryEmptyCountry(){
        this.param.isNotConfig = true;
        this.param.countryName ="";
        this.param.method = '';
        this.isSearchVisible = true;
        tiyData.tPage.currentPage = 1;
        webList(this,tiyData,1)
      },
      webList(){
        this.param.isNotConfig = false;
        this.isSearchVisible = false;
        tiyData.tPage.currentPage = 1;
        webList(this,tiyData,1)
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData,1);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData,webList);
      },
      showPostageDetail(index){
        tiyData.tStatus.showPostageDetailModal.operationIndex = index;
        showPostageDetail(this,tiyData);
      },
      delete2(index){
        tiyData.tStatus.actionModal.title="删除国家运费";
        tiyData.tStatus.actionModal.isShow=true;
        tiyData.tStatus.actionModal.content="确定删除吗？";
        tiyData.tStatus.actionModal.action=this.actionDel;
        tiyData.tStatus.actionModal.operationIndex=index;
      },
      actionDel(){
        actionDelete(this,tiyData);
      }

    },
    mounted(){
      init(this,tiyData);
      // webList(this,tiyData)
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional) "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }
  .disSelect {
    background-color: #8d8d8d;
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
  }
  .itemChecked{
    background-color:#FDBDBD
  }
  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }



  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .color_modal{
    z-index:999999
  }

  .item_card{
    margin: 10px;
    text-align: center;
    /*border: solid #f1f1f1 1px;*/
    /*cursor: pointer;*/
    width: 100px;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
